<template>
  <div class="height100">
    <div class="myAside height100">
      <Aside ref="aside"></Aside>
    </div>
    <el-container class="height100">
      <el-header :height="headerHeight + 'px'" :style="headerStyle">
        <Header></Header>
      </el-header>
      <el-main :style="mainStyle" class="height100">
        <nuxt />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import handleFullScreen from '../assets/jsUtil/pageFullScreen'
import Aside from '@/layouts/aside/Aside'
import Header from '@/layouts/header/Header'

export default {
  name: 'Admin',
  components: { Header, Aside },
  props: [],
  data() {
    return { fullscreen: false }
  },
  computed: {
    mainStyle() {
      return 'margin:' + this.headerHeight + 'px 0 0 ' + this.asideWidth + 'px'
    },
    headerStyle() {
      return 'padding:0 0 0 ' + this.asideWidth + 'px'
    },
    asideWidth() {
      return this.$store.state.base.admin.asideWidth
    },
    headerHeight() {
      return this.$store.state.base.admin.headerHeight
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    fullScreen() {
      this.fullscreen = handleFullScreen(this.fullscreen)
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: white;
  color: #333;
  padding: 0;
  position: fixed;
  top: 0;
  z-index: 9;
  width: 100%;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
.myAside {
  position: fixed;
  top: 0;
  z-index: 10;
  display: flex;
  height: 100%;
}
.height100 {
  height: 100%;
}
</style>
